<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>EduCenter</title>
<!-- Plugins CSS -->
<link href="${pageContext.request.contextPath}/dist/css/plugins.css" rel="stylesheet" >
<!-- Custom CSS -->
<link href="${pageContext.request.contextPath}/dist/css/style.css" rel="stylesheet">
<!-- Favicon -->
<link rel="shortcut icon" type="image/x-icon" href="${pageContext.request.contextPath}/dist/images/favicon.ico">
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<!-- Pre Loader -->
<div id="dvLoading"></div>
<!-- Header Area -->
<header class="header" > 
  <!-- Topbar -->
  <div class="topbar">
    <div class="container">
      <div class="row">
        <div class="col-lg-6 col-md-7 col-12"  style="margin-left:600px;"> 
          <!-- Top Contact -->
          <ul class="top-contact">
            <li><i class="fa fa-phone"></i>+010 1234 56789</li>
            <li><i class="fa fa-envelope"></i><a href="mailto:support@yourmail.com">support@yourmail.com</a></li>
          </ul>
          <!-- End Top Contact --> 
        </div>
      </div>
    </div>
  </div>
  <!-- End Topbar --> 
  <!-- Header Inner -->
  <div class="header-inner">
    <div class="container">
      <div class="inner">
        <div class="row">
          <div class="col-lg-2 col-md-3 col-12"> 
            <!-- Start Logo -->
            <div class="logo"> <a href="index.jsp"><img src="${pageContext.request.contextPath}/dist/images/logo.png" alt=""></a> </div>
            <!-- End Logo --> 
            <!-- Mobile Nav -->
            <div class="mobile-nav"></div>
            <!-- End Mobile Nav --> 
          </div>
          <div class="col-lg-7 col-md-9 col-12"> 
            <!-- Main Menu -->
            <div class="main-menu" style="margin-left:120px">
								<nav class="navigation">
									<ul class="nav menu">
										<li><a href="index.jsp">首页</a></li>
										<li><a href="privacy-policy.jsp">隐私政策</a></li>
										<li class="active"><a href="aritcle-list.jsp">文章列表</a></li>
										<li><a href="contact.jsp">发布文章</a></li>
										<!-- <li><a href="404.jsp">跳转错误</a></li> -->
									</ul>
								</nav>
							</div>
            <!--/ End Main Menu --> 
          </div>
          <div class="col-lg-3 col-12">
           <c:if test="${sessionScope.frontUser != null }">
		        <ul class="nav menu">
			        <li style="margin-top:20px">
			          	<img src="${pageContext.request.contextPath }/DownloadFileServlet?fileName=<c:out value="${frontUser.userImg }"></c:out>" style="border-radius: 50%; width: 25px; height: 25px; margin-top: 3px;"></li>
					<li style="margin-top:25px"><c:out value="${frontUser.userAccount }"></c:out></li>
					<li style="margin-top:25px">积分:<c:out value="${frontUser.userScore }"></c:out></li>
					<li><a href='${pageContext.request.contextPath }/UsersController?op=frontExit'>退出</a></li>
				</ul>
		      </c:if>
          </div>
        </div>
      </div>
    </div>
  </div>
  <!--/ End Header Inner --> 
</header>
<!-- Breadcrumbs -->
<div class="breadcrumbs overlay">
    <div class="container">
      <div class="bread-inner">
        <div class="row">
          <div class="col-12">
            <h2 id="getgoodwords"></h2>
          
          </div>
        </div>
      </div>
    </div>
  </div>
  <!-- End Breadcrumbs -->
<!-- Start Feature section Area -->
<div class="inner-content-wrapper services-sec services-details-area">
  <div class="container">
    <div class="row">
        <div class="col-xl-4 col-lg-5 mb-30" style="height:100%">
          <div class="widget mb-40">
            <h3 class="widget-title">文章类型</h3>
            <ul class="service-list" id="showTypes">   
            </ul>
          </div>
          <div class="widget">
            <form class="search-form">
              <input type="text" placeholder="搜索文章或作者..." id="queryKey">
              <button type="button" id="querybtn"><i class="fas fa-search" ></i></button>
            </form>
          </div>
        </div>
        <!-- 正文部分 -->
        <div class="col-xl-8 col-lg-7">
          <div class="services-details-wrapper" id="showArtis">

          </div>
          <div class="pagination Alternate" id="gotoPageDiv">
          <nav aria-label="Page navigation">			
		 <ul id="pageinfo" class="pagination">
					
			</ul>		
			 </nav>		          
			</div>
        </div>
      
     
      </div>      
  </div>
</div>
<!-- End Feature section Area --> 
<!-- footer -->
<footer class="bg-black">
  <div class="container p-footer">
    <div class="row justify-content-between">
      <!-- footer content -->
      <div class="col-lg-5 mb-5 mb-lg-0">
        <!-- logo -->
        <a class="mb-4 f-logo d-inline-block" href="index.jsp"><img src="${pageContext.request.contextPath}/dist/images/footer-logo.png" alt=""></a>
        <p class="text-light">中国专业IT社区，致力于为中国软件开发者提供知识传播、在线学习、职业发展等全生命周期服务。
        						为AI爱好者提供一站式从入门到熟练运用到工作中的学习平台 
								提供拟真实验环境，让学员学习后直接具备在公司真实线上环境完成分配的工作内容能力  
								全面提升学员基础能力+编码能力+实战能力，一次补齐后续工作中所有短板。
		</p>
      </div>
      <div class="col-lg-6">
        <div class="row">
          <div class="col-6">
            <h4 class="text-white mb-4">友情链接</h4>
            <ul class="list-styled">
              <li class="mb-lg-3 mb-2 text-light"><!-- <a class="text-light d-block" href="index.jsp"></a> --></li>
              <li class="mb-lg-3 mb-2 text-light"><!-- <a class="text-light d-block" href="about.jsp"></a> --></li>
              <li class="mb-lg-3 mb-2 text-light"><!-- <a class="text-light d-block" href="blog.jsp"></a> --></li>
              <li class="mb-lg-3 mb-2 text-light"><!-- <a class="text-light d-block" href="team.jsp"></a> --></li>
              <li class="mb-lg-3 mb-2 text-light"><!-- <a class="text-light d-block" href="contact.jsp"></a> --></li>
            </ul>
          </div>
          <div class="col-6">
            <h4 class="text-white mb-4">诚招合作商</h4>
            <ul class="list-unstyled">
              <li class="text-light mb-3"></li>
              <li class="text-light mb-3"></li>
              <li class="text-light mb-3"></li>
            </ul>
          </div>
        </div>
      </div>
    </div>
  </div>
  <!-- copyright -->
  <div class="container copyright-c">
    <div class="row">
      <div class="col-lg-6 col-md-12 text-center text-center text-lg-left mb-3 mb-md-0">
        <p class="mb-0 text-white">Copyright &copy; 2020.Company name All rights reserved.
      </div>
    </div>
  </div>
</footer><!-- footer -->
<!--jquery js --> 
<script src="${pageContext.request.contextPath}/dist/js/jquery-min.js"></script> 
<!-- Popper Min JS --> 
<script src="${pageContext.request.contextPath}/dist/js/popper.min.js"></script> 
<!--jquery js --> 
<script src="${pageContext.request.contextPath}/dist/js/bootstrap.min.js"></script> 
<!--jquery js --> 
<script src="${pageContext.request.contextPath}/dist/js/plugins.js"></script> 
<!--Fontawesome js --> 
<script src="${pageContext.request.contextPath}/dist/js/fontawesome.js"></script> 
<!-- Owl Carousel js --> 
<script src="${pageContext.request.contextPath}/dist/js/swiper-slider.js"></script> 
<!-- Fancybox js --> 
<script src="${pageContext.request.contextPath}/dist/js/fancybox.js"></script> 
<!--owl.carousel js --> 
<script src="${pageContext.request.contextPath}/dist/js/jquery.animateNumber.min.js"></script> 
<!-- MagnificPopup JS --> 
<script src="${pageContext.request.contextPath}/dist/js/jquery.magnific-popup.min.js"></script> 
<!-- Slicknav js --> 
<script src="${pageContext.request.contextPath}/dist/js/slicknav.min.js"></script> 
<!--jquery js --> 
<script src="${pageContext.request.contextPath}/dist/js/custom.js"></script>
</body>
<script>
//全局变量类型名
var typesName="";
$(function(){
	//显示鼓励鸡汤
	$.post("${pageContext.request.contextPath}/EduControllerByLu",{op:"getGoodWord"},function(data){
		$("#getgoodwords").text(data);
	},"json")
	
	//显示类型
	$.post("${pageContext.request.contextPath}/EduControllerByLu",{op:"getTypeName"},function(data){
		$("#showTypes").empty();
		$.each(data,function(n,name){
			$("#showTypes").append("<li> <a href=\"javascript:queryByType('"+name+"')\">"+name+"</a> </li>");
		});
	},"json")
	
	//显示文章
	$.post("${pageContext.request.contextPath}/EduControllerByLu",{op:"queryarticle"},function(data){
		showAtricls(data);
	},"json")
	
	 //首页跳转
	$(document).on("click",".firstpage",function() {
		pageChange(1,"queryarticle",typesName);
	});
	//尾巴跳转
	$(document).on("click",".endpage",function() {
			pageChange($("#totalpage").text()*1,"queryarticle",typesName);
	});
	//模糊查询
	$(document).on("click","#querybtn",function() {
		typesName="";
		pageChange(1,"queryarticle",typesName);
	}); 
	//下一页跳转
	$(document).on("click",".nextpage",function() {
		pageChange(($("#pageno").text()*1)+1,"queryarticle",typesName);
	}); 
	//每一页跳转
	$(document).on("click",".changepage",function() {
		//这里this代表被点击的数字
		pageChange($(this).text()*1,"queryarticle",typesName);
	}); 
	//数字跳转
	$(document).on("click",".gotopage",function() {
		//这里this代表被点击的数字
		var num=$(".gotoid").val();
		var totalpage=$("#totalpage").text();
		if(num<1){
			num=1;
			$(".gotoid").val(1);
		}else if(num>totalpage*1){//弱类型,字符串*1直接转数字
			num=totalpage*1;
			$(".gotoid").val(totalpage*1);
		}
		pageChange(num,"queryarticle",typesName);
	}); 
		
})//入口结束
//类型查询
function queryByType(typename){
	typesName=typename;
	pageChange(1,"queryarticle",typesName);
}
//显示文章 
function showAtricls(data){
			$("#showArtis").empty();
			$.each(data.data,function(n,article){
				//去除富文本标签
				var aa=article.articleContent;
				aa = aa.replace(/(\n)/g, "");    
				aa = aa.replace(/(\t)/g, "");    
				aa = aa.replace(/(\r)/g, "");    
				aa = aa.replace(/<\/?[^>]*>/g, "");    
				aa = aa.replace(/\s*/g, "");  			
			$("#showArtis").append(" <div class='services-details-text'>\r\n"+
			              "<h2><a href='${pageContext.request.contextPath}/ArticleController?op=queryById&articleId="+article.articleId+"'>"+article.articleTitle+"</a></h2>\r\n"+
			             " <font size='4'>"+article.articleDate.substring(0,article.articleDate.length-2)+" </font><font size='4'> By."+article.users.userAccount+" </font><font color='#5F9EA0'>阅读:"+article.articleRead+"</font>\r\n"+
			              "<p class='textContent'>"+aa+"</p><hr /></div>");	
			})
			 $("#showArtis").append("<p>当前第<span id='pageno'>"+data.pageNo+"</span>页/共<span id='totalpage'>"+data.totalPage+"</span>页/每页显示<span id='pagesize'>"+data.pageSize+"</span>条/共<span id='totalcount'>"+data.totalCount+"</span>条数据</p>");
	        //增加分页
			 $("#pageinfo").empty();
			if(1==data.pageNo){
				$("#pageinfo").append(' <li class="active"><a href="javascript:void(0)">首页 </a></li>');
			}else{
				$("#pageinfo").append(' <li class=""><a href="javascript:void(0)" class="firstpage">首页</a></li>');
			}
			for(var i=1;i<=data.totalPage;i++){
				 if(i==data.pageNo){
						$("#pageinfo").append(' <li class="active"><a href="javascript:void(0)">'+i+' </a></li>');
					}else{
						$("#pageinfo").append(' <li class=""><a href="javascript:void(0)" class="changepage">'+i+' </a></li>');
					}
			 }
			 if(data.totalPage==data.pageNo){
					$("#pageinfo").append(' <li class="active"><a href="javascript:void(0)">&raquo;</a></li>');
				}else{
					$("#pageinfo").append(' <li class=""><a href="javascript:void(0)" class="nextpage" >&raquo;</a></li>');
				}
			 if(data.totalPage==data.pageNo){
					$("#pageinfo").append(' <li class="active"><a href="javascript:void(0)" >尾页</a></li>');
				}else{
					$("#pageinfo").append(' <li class=""><a href="javascript:void(0)" class="endpage" >尾页</a></li>');
				}
			 $("#pageinfo").append(' <li class="gotonumber"  style="height:10px"><a href="javascript:void(0)"><input type="number" class="gotoid" min="1" max="'+data.totalPage+'" style="height:15px"></a></li>');
			 $("#pageinfo").append(' <li class="" ><a href="javascript:void(0)" class="gotopage" >跳转</a></li>'); 
			
	 }
	 
//分页的方法
function pageChange(pageno,ops,type){
		$.get("${pageContext.request.contextPath}/EduControllerByLu",{op:ops,pageNo:pageno,pageSize:10,titleKey:$("#queryKey").val(),typeKey:type},function(data){
			showAtricls(data);
		},"json");
	}
	//去除富文本标签

 
</script>
<style>
/* 显示每行3页 */
.textContent{
line-height:20px;
height:60px;
overflow:hidden; 
text-overflow: ellipsis;
}
</style>
</html>
